<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">我的订单</block>
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<u-sticky :offset-top="CustomBar">
				<view class="order_list_a">
					<view class="order_list_a_a" @click="order_click(0)" :class="current==0?'order_list_a_aa':''">
						全部
						<view v-if="current==0" class="order_list_a_a_a"></view>
					</view>

					<view class="order_list_a_a" @click="order_click(2)" :class="current==2?'order_list_a_aa':''">
						待发货
						<view v-if="current==2" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(3)" :class="current==3?'order_list_a_aa':''">
						待收货
						<view v-if="current==3" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(4)" :class="current==4?'order_list_a_aa':''">
						待核销
						<view v-if="current==4" class="order_list_a_a_a"></view>
					</view>
					<view class="order_list_a_a" @click="order_click(5)" :class="current==5?'order_list_a_aa':''">
						已完成
						<view v-if="current==5" class="order_list_a_a_a"></view>
					</view>
				</view>
			</u-sticky>
			<view class="order_a" v-if="orderList.length>0">
				<view class="order_a_a" v-for="(item, index) in orderList" :key="index">
					<view style="overflow: hidden;"
						@click="goPage('/pages/order/order_details?order_sn=' + item.order_sn + '&id=' + item.id)">
						<view class="order_a_a_a">
							<view class="order_a_a_a_a">
								订单号：{{item.order_sn}}
							</view>
							<view class="order_a_a_a_b">
								{{item.order_status_desc}}
							</view>
						</view>
						<view class="order_a_a_b" v-for="(item1, index1) in item.order_goods" :key="index1">
							<view class="order_a_a_b_a">
								<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="8rpx" lazy-load
									:src="item1.image"></custom-image>
							</view>
							<view class="order_a_a_b_b">
								<view class="order_a_a_b_b_a">{{item1.goods_name}}</view>
								<view class="order_a_a_b_b_b">规格：{{item1.spec_value}}</view>
								<view class="order_a_a_b_b_c">
									<view class="order_a_a_b_b_c_a" v-if="item1.integral==0 && item1.goods_price>0">
										<span>¥</span>{{item1.goods_price}}
									</view>
									<view class="order_a_a_b_b_c_a" v-if="item1.goods_price==0 && item1.integral>0">
										<span>积分</span>{{item1.integral}}
									</view>
									<view class="order_a_a_b_b_c_a" v-if="item1.goods_price>0 && item1.integral>0">
										<span>积分</span>{{item1.integral}}+<span>¥</span>{{item1.goods_price}}
									</view>
									<view class="order_a_a_b_b_c_b">
										X{{item1.goods_num}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="order_a_b">
						<view class="order_a_b_b">应付：<span>￥{{item.order_amount}}</span></view>
						<view class="order_a_b_a">共{{item.total_num}}件商品</view>
					</view> -->
					<view class="user_money_log_b_c" v-if="item.order_status!=3 && item.order_status!=4">
						<view class="user_money_log_b_c_b" v-if="item.order_status==2"
							@click="order_confirm_click(item,index)">确认收货</view>
						<view class="user_money_log_b_c_b" v-if="item.order_status==0"
							@click="goPage('/pages/confirm_order/order_details?order_sn='+item.order_sn+'&from=order')"
							style="background-color: #fff;border:1rpx solid #FF4D4F;color:#FF4D4F;">付款</view>
						<view class="user_money_log_b_c_b" v-if="item.order_status==0"
							@click="order_cancel_click(item,index)"
							style="margin-right: 15rpx; background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">
							取消订单</view>
						<view class="user_money_log_b_c_b" v-if="item.order_status==1"
							@click="order_cancel_click(item,index)"
							style="background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">取消订单</view>
						<!-- <view class="user_money_log_b_c_b" v-if="item.order_status==2 && item.shipping_status==1"
							@click="goPage('/pages/order/goods_logistics?id='+item.id)"
							style="margin-right: 15rpx; background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">
							查看物流</view> -->
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无订单</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
	import {
		loadingType
	} from '@/utils/type';
	export default {
		data() {
			return {
				showLoading: true,
				uid: 0,
				CustomBarh: 0,
				current: 0,
				list: ['全部', '待兑换', '待发货', '待收货', '待核销', '已完成'],
				keyword: '',
				orderList: [],
				status: loadingType.LOADING,
				page: 1,
				limit: 8,
				type: 0,
				orderId: 0,
			}
		},
		onLoad: function(options) {
			this.current = options.current ? options.current : 0;
			// console.log("订单结果",this.orderList)
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
			this.CustomBarh = this.CustomBar;
		},
		onReachBottom: function() {
			this.getOrderListFun();
		},
		created() {
			uni.$on("refreshorder", () => {
				this.onRefresh();
			});
		},
		destroyed: function() {
			uni.$off("refreshorder");
		},
		mounted() {
			this.onRefresh();
		},
		methods: {
			order_confirm_click(item, index) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '您确认该订单已收到商品吗？',
					success: function(res) {
						if (res.confirm) {
							_this.order_confirm_post(item, index);
						}
					}
				});
			},
			order_confirm_post(item, index) {
				let paramsList = {
					uid: this.uid,
					order_id: item.id,
				}
				let optsList = {
					url: 'o-order_confirm',
					method: 'post'
				};
				uni.showLoading({
					title: '确认中',
					mask: true
				})
				let _this = this;
				let orderList = this.orderList;

				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						// console.log("得到了",res)
						_this.$nextTick(() => {
							_this.$set(orderList[index], 'order_status_desc', '已完成');
							_this.$set(orderList[index], 'order_status', 3);
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
					//刷新
					uni.$emit("refreshorder");
				});
			},
			order_cancel_click(item, index) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '您确认取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							_this.order_cancel_post(item, index);
						}
					}
				});
			},
			order_cancel_post(item, index) {
				let paramsList = {
					uid: this.uid,
					order_id: item.id,
				}
				let optsList = {
					url: 'o-order_cancel',
					method: 'post'
				};
				uni.showLoading({
					title: '取消中',
					mask: true
				})
				let _this = this;
				let orderList = this.orderList;
				// console.log("订单结果",orderList)
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						_this.$nextTick(() => {
							_this.$set(orderList[index], 'order_status_desc', '已取消');
							_this.$set(orderList[index], 'order_status', 4);
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
			order_click(index) {
				this.current = index;
				this.onRefresh();
			},
			onRefresh() {
				this.page = 1
				this.orderList = []
				// console.log("订单结果",this.orderList)
				this.status = loadingType.LOADING
				this.$nextTick(() => {
					this.getOrderListFun();
				});
			},
			async getOrderListFun() {
				// this.orderList = [];
				let {
					page,
					limit,
					orderList,
					current,
					keyword,
					status
				} = this;
				if (status == loadingType.FINISHED) return;
				
				const paramsList = {
					page: page,
					limit: limit,
					// type: current,
					type:current==5? 4: current,
					keyword: keyword,
					uid: this.uid
				}
				// const paramsList = {
				// 	page: page,
				// 	limit: limit,
				// 	type: current,
				// 	keyword: keyword,
				// 	uid: this.uid
				// }
				let optsList = {
					url: 'o-lists',
					method: 'post'
				};
				let _this = this;
				request.httpRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						console.log("更加详细",res.data)
						if (page == 1) orderList = []
						let {
							list,
							more
						} = res.data.data
						orderList = orderList.concat(list)
						_this.orderList = orderList
						console.log("订单列表", _this.orderList)
						this.page = ++this.page
						if (!more) {
							this.status = loadingType.FINISHED
						}
						if (this.current == 4) {
							_this.orderList = _this.orderList.filter((order => order.verification_status ===0))
						}
						if (this.current == 5) {
							_this.orderList = _this.orderList.filter((order => order.verification_status ===1))
						}
						if (this.orderList.length <= 0) {
							this.status = loadingType.EMPTY
						}
					} else {
						this.status = loadingType.ERROR
					}
					_this.showLoading = false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_list_a {
		height: 90rpx;
		line-height: 90rpx;
		width: 750rpx;
		background-color: #fff;
	}

	.order_list_a_a {
		width: 20%;
		float: left;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		position: relative;
		text-align: center;
	}

	.order_list_a_aa {
		color: #FF4D4F;
	}

	.order_list_a_a_a {
		position: absolute;
		height: 8rpx;
		bottom: 5rpx;
		background-color: #FF4D4F;
		width: 100rpx;
		left: 50%;
		margin-left: -50rpx;
	}

	.header_wrap {
		background: #F7F7F7;
		overflow: hidden;
		box-sizing: border-box;
	}

	.sousuo {
		width: 750rpx;
		margin: auto;
		background-color: #ffffff;
		display: block;
	}

	.article_list_b {
		height: 79rpx;
		width: 750rpx;
		margin: auto;
		overflow: hidden;
		background: #FFFFFF;
		padding: 0 10rpx;
	}

	.article_list_b_a {
		text-align: center;
		float: left;
		font-size: 28rpx;
		font-family: PingFang;
		font-weight: bold;
		color: #333333;
		height: 79rpx;
		margin-left: 40rpx;
		line-height: 79rpx;
	}

	.article_list_b_a_a {
		width: 37rpx;
		height: 6rpx;
		background: #3F78F6;
		border-radius: 3rpx;
		margin: auto;
		margin-top: -2px;
	}

	.article_list_b_aa {
		color: #227BE5;
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.order_a {
		overflow: hidden;
	}

	.order_a_a {
		width: 702rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		padding: 33rpx 28rpx;
		overflow: hidden;
	}

	.order_a_a_a {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order_a_a_a_a {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.order_a_a_a_b {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF3F4B;
	}

	.order_a_a_b {
		overflow: hidden;
		margin-top: 20rpx;
	}

	.order_a_a_b_a {
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		float: left;
	}

	.order_a_a_b_b {
		float: right;
		width: 490rpx;
		height: 140rpx;
		overflow: hidden;
	}

	.order_a_a_b_b_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		overflow: hidden;
		height: 40rpx;
		line-height: 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order_a_a_b_b_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.order_a_a_b_b_c_a {
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4D4F;
	}

	.order_a_a_b_b_c_a span {
		ont-size: 24rpx;
	}

	.order_a_a_b_b_c_b {
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.order_a_a_b_b_c {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF3F4B;
		margin-top: 10rpx;
		overflow: hidden;
	}

	.order_a_a_b_b_c span {
		font-size: 24rpx;
	}

	.order_a_a_b_b_c_b {
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000;
	}

	.order_a_b {
		margin-top: 30rpx;
		line-height: 30rpx;
		overflow: hidden;
		width: 100%;
	}

	.order_a_b_a {
		float: right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.order_a_b_b {
		float: right;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		margin-left: 20rpx;
	}

	.order_a_b_b span {
		font-size: 24rpx;
	}

	.order_a_a_c {
		margin-top: 20rpx;
		text-align: right;

	}

	.order_a_a_d {
		display: flex;
		align-items: center;
		height: 60rpx;
		margin-top: 30rpx;
	}

	.order_a_a_d_a {
		width: 164rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #EE8824;
		border-radius: 30rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EE8824;
		margin-left: 20rpx;
	}

	.order_a_a_d_aa {
		border: 1rpx solid #CCCCCC;
		color: #666666;
	}

	.order_a_a_e {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 20rpx;
	}

	.order_a_a_f {
		overflow: hidden;
	}

	.order_a_a_f_a {
		width: 230rpx;
		height: 230rpx;
		float: left;
		margin-right: 6rpx;
		margin-top: 23rpx;
	}

	.order_a_a_f_a image:nth-child(3) {
		margin-right: 0;
	}

	.user_money_log_b_c {
		height: 60rpx;
		margin-top: 25rpx;
		overflow: hidden;
	}

	.user_money_log_b_c_b {
		width: 160rpx;
		height: 60rpx;
		background: #FF4D4F;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 55rpx;
		text-align: center;
		float: right;
		border: 2rpx solid #FF4D4F;
	}
</style>